<template>
  <view :style="themeColor">
    <view class="page">
      <fu-custom bgColor="bg-white" :isBack="true" :isBottom="true">
        <block slot="content">填写寄回信息</block>
      </fu-custom>
      <!---售后订单flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout returnInformation_flex_1">
        <view class='flex flex-wrap align-stretch returnInformation_fd1_0'>
          <image class='returnInformation_fd1_0_c0' mode="aspectFit" :src='thumb'></image>
          <view class='flex flex-direction flex-wrap align-stretch flex-sub returnInformation_fd1_0_c1'>
            <text class='returnInformation_fd1_0_c1_c0'>{{name}}</text>
            <text class='returnInformation_fd1_0_c1_c1'>{{sku_name}}</text>
            <view class='flex flex-wrap align-center justify-between'>
              <view class='flex flex-wrap align-center'>
                <text class='returnInformation_fd1_0_c1_c2_c0_c0'>￥</text>
                <text class=' returnInformation_fd1_0_c1_c2_c0_c1'>
                  <text class=' returnInformation_price1_fd1_0_c1_c2_c0_c1'>{{ price | frontPrice }}</text>
                  <text class=' returnInformation_price2_fd1_0_c1_c2_c0_c1'>{{ price | laterPrice }}</text>
                </text>
              </view>
              <view class='flex flex-wrap align-center returnInformation_fd1_0_c1_c2_c1'>
                <text>x</text>
                <text>{{num}}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!---售后订单flex布局结束-->
      <!---填写寄回信息flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout returnInformation_flex_2">
        <text class='returnInformation_fd2_0'>为了给您更优的退换货时效和体验，我公司建议优先选择
          协作快递韵达。</text>
        <view class='flex flex-wrap align-center returnInformation_fd2_1' @tap.stop="handleJumpDiy"
          data-type="navigateTo" :data-url="`/pages/ddgl/chooseLogisticsCompany/chooseLogisticsCompany`">
          <text class='returnInformation_fd2_1_c0'>物流公司</text>
          <input class='flex-sub returnInformation_fd2_1_c1' type="text" :placeholder="`请选择`" confirm-type="done"
            :maxlength="-1" :disabled='true' placeholder-style="color:#999;font-size:32rpx"
            v-model="logistics.logistics_name" />
          <text class='fu-iconfont2  returnInformation_fd2_1_c2'>&#xe7f2;</text>
        </view>
        <view class='flex flex-wrap align-center returnInformation_fd2_1'>
          <text class='returnInformation_fd2_1_c0'>物流单号</text>
          <input class='flex-sub returnInformation_fd2_2_c1' type="text" :placeholder="`请填写物流单号`" confirm-type="done"
            :maxlength="-1" placeholder-style="color:#999;font-size:32rpx" v-model="express_no" />
        </view>
        <view class='flex flex-wrap align-center returnInformation_fd2_1'>
          <text class='returnInformation_fd2_1_c0'>联系电话</text>
          <input class='flex-sub returnInformation_fd2_3_c1' type="number" :placeholder="`请输入联系电话`" confirm-type="done"
            :maxlength="11" placeholder-style="color:#999;font-size:32rpx" v-model="mobile" />
        </view>
        <view class='flex flex-wrap align-center returnInformation_fd2_4'>
          <text class='returnInformation_fd2_1_c0'>退换说明</text>
          <input class='flex-sub returnInformation_fd2_2_c1' type="text" :placeholder="`请输入(选填)`" confirm-type="done"
            :maxlength="-1" placeholder-style="color:#999;font-size:32rpx" v-model="content" />
        </view>
        <benben-images-upload ref="benbenImagesUploadfd2_5" :img-list.sync="url" :img-ids.sync="images" :maxlength="9">
          <template #content="{ num, maxlength, isShow, imgList }">
            <view class="flex flex-wrap align-start flex returnInformation_fd2_5">

              <view v-for="(image, index) in imgList" :key="index"
                class='flex position-relative returnInformation_fd2_50'>
                <text class='fu-iconfont2 position-absolute returnInformation_fd2_500'
                  @tap.stop="$refs.benbenImagesUploadfd2_5.delImage(index)">&#xE8E7;</text>
                <image class='returnInformation_fd2_501' @tap.stop="$refs.benbenImagesUploadfd2_5.previewImage(index)"
                  :src='image'></image>
              </view>

              <image class='returnInformation_fd2_51' @tap.stop="$refs.benbenImagesUploadfd2_5.manyChooseImage()"
                v-if="isShow" mode="aspectFit" :src='STATIC_URL+"297.jpg"'></image>

            </view>
          </template>
        </benben-images-upload>
        <view class='flex flex-wrap align-center justify-center returnInformation_fd2_6'>
          <button class='returnInformation_fd2_6_c0' @tap.stop="submitMessageFunc()">提交</button>
        </view>
      </view>

      <!---填写寄回信息flex布局结束-->


    </view>
  </view>
</template>
<script>
  import {
    validate
  } from '@/common/utils/validate.js'
  export default {
    components: {},


    data() {
      return {
        "express_no": "",
        "mobile": "",
        "content": "",
        "images": "",
        "url": [],
        "logistics": {
          "logistics_id": "",
          "logistics_name": ""
        },
        "goodsInfo": {},
        "remark": "",
        "text": "shenqingchengg",
        "aid": null,
        "thumb": "https://oss.tiantianhuoke.com/images/1684395313612122.png",
        "name": "印尼进口山竹 3A级中果 2.5kg装 单果约40-70g 新鲜水果",
        "sku_name": "",
        "price": "89",
        "num": "1"
      };
    },
    computed: {
      themeColor() {
        return this.$store.getters.themeColor
      },

    },
    watch: {},
    onLoad(options) {
      let {
        aid,
        thumb,
        name,
        sku_name,
        price,
        num
      } = options
      if (aid !== undefined) this.aid = aid
      if (thumb !== undefined) this.thumb = thumb
      if (name !== undefined) this.name = name
      if (sku_name !== undefined) this.sku_name = sku_name
      if (price !== undefined) this.price = price
      if (num !== undefined) this.num = num
      this.diyPageListen()
    },
    onUnload() {
      this.diyOffPageListen()
    },
    onReady() {

    },
    onShow() {

    },
    onHide() {

    },
    onResize() {

    },
    onPullDownRefresh() {

    },
    onReachBottom(e) {

    },
    onPageScroll(e) {

    },
    methods: {
      //提交寄回信息
      async submitMessageFunc() {
        if (!validate(this.express_no, 'require')) {
          this.$message.info('请输入买家发货运单号');
          return false;
        }
        if (!validate(this.logistics.logistics_id, 'require')) {
          this.$message.info('请选择物流公司');
          return false;
        }
        if (!validate(this.mobile, 'require')) {
          this.$message.info('请填写联系方式');
          return false;
        }
        if (!validate(this.mobile, 'phone')) {
          this.$message.info('请填写正确的联系方式');
          return false;
        }
        //请求方法
        //数据验证

        let data6427dab6182fa = await this.$api.post(global.apiUrls.post6427dab6182fa, {
          id: this.aid,
          express_company_id: this.logistics.logistics_id,
          express_no: this.express_no,
          remark: this.content,
          img: this.images
        });

        if (data6427dab6182fa.data.code != 1) {
          this.$message.info(data6427dab6182fa.data.msg);
          return
        }



        this.$message.info('提交成功');
        uni.$emit('shenqingchenggss', this.text)
        setTimeout(() => {
          this.$urouter.navigateBack(1);
        }, 500)
      },
      //页面监听
      diyPageListen() {
        uni.$on('logistics', (data) => {
          this.logistics = data;
        });
      },
      //注销页面监听
      diyOffPageListen() {
        uni.$off('logistics');
      }
    }
  };
</script>
<style lang="scss" scoped>
  .page {
    width: 100vw;
    overflow-x: hidden;
    min-height: calc(100vh - var(--window-bottom));
    background: #fff;
    background-size: 100% auto;
  }

  .returnInformation_flex_0 {
    background: #fff;
    width: 750rpx;
    height: 88rpx;
    overflow: hidden;
    z-index: 10;
    top: 0rpx;
    background-size: 100% auto !important;
  }

  .returnInformation_fd0_0_c2 {
    padding: 0rpx 0rpx 0rpx 0rpx;
    width: 200rpx;
  }

  .returnInformation_fd0_0_c1_c0 {
    font-size: 36rpx;
    font-weight: 500;
    color: #333333;
  }

  .returnInformation_fd0_0_c0_c0 {
    font-size: 36rpx;
    color: #333;
    font-weight: 500;
  }

  .returnInformation_fd0_0_c0 {
    width: 200rpx;
  }

  .returnInformation_fd0_0 {
    padding: 0rpx 32rpx 0rpx 32rpx;
    line-height: 88rpx;
  }

  .returnInformation_flex_1 {
    padding: 0rpx 24rpx 0rpx 24rpx;
  }

  .returnInformation_fd1_0_c1_c2_c1 {
    font-size: 24rpx;
    font-weight: 400;
    color: #999999;
  }

  .returnInformation_price2_fd1_0_c1_c2_c0_c1 {
    font-size: 22rpx;
  }

  .returnInformation_price1_fd1_0_c1_c2_c0_c1 {
    font-size: 32rpx;
  }

  .returnInformation_fd1_0_c1_c2_c0_c1 {
    color: var(--benbenFontColor7);
    font-weight: 600;
  }

  .returnInformation_fd1_0_c1_c2_c0_c0 {
    font-size: 20rpx;
    font-weight: 700;
    color: var(--benbenFontColor7);
  }

  .returnInformation_fd1_0_c1_c1 {
    font-size: 24rpx;
    font-weight: 400;
    color: #999999;
    margin: 10rpx 0rpx 36rpx 0rpx;
  }

  .returnInformation_fd1_0_c1_c0 {
    font-size: 28rpx;
    font-weight: 500;
    color: #333333;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }

  .returnInformation_fd1_0_c1 {
    margin: 0rpx 0rpx 0rpx 34rpx;
  }

  .returnInformation_fd1_0_c0 {
    width: 200rpx;
    height: 200rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
  }

  .returnInformation_fd1_0 {
    margin: 24rpx 0rpx 0rpx 0rpx;
  }

  .returnInformation_flex_2 {
    padding: 15rpx 24rpx 0rpx 24rpx;
  }

  .returnInformation_fd2_6_c0 {
    background: var(--benbenbgColor7);
    border-radius: 44rpx 44rpx 44rpx 44rpx;
    font-size: 32rpx;
    color: #fff;
    width: 686rpx;
    height: 88rpx;
    line-height: 88rpx;
    font-weight: 500;
  }

  .returnInformation_fd2_6 {
    position: fixed;
    bottom: calc(32rpx + var(--window-bottom));
    left: 0rpx;
    width: 750rpx;
    height: 88rpx;
  }

  .returnInformation_fd2_51 {
    width: 160rpx;
    height: 160rpx;
    margin: 0rpx 24rpx 24rpx 0rpx;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
  }

  .returnInformation_fd2_501 {
    width: 160rpx;
    height: 160rpx;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
  }

  .returnInformation_fd2_500 {
    top: 0rpx;
    right: 0rpx;
    z-index: 10;
    color: #ff5536;
  }

  .returnInformation_fd2_50 {
    margin: 0rpx 24rpx 24rpx 0rpx;
  }

  .returnInformation_fd2_5 {
    width: 100%;
    padding: 24rpx 0rpx 0rpx 24rpx;
  }

  .returnInformation_fd2_4 {
    border-bottom: 1px solid #eee;
    font-weight: 400;
    font-size: 32rpx;
    color: #333;
  }

  .returnInformation_fd2_3_c1 {
    font-size: 32rpx;
    font-weight: 500;
    color: var(--benbenFontColor0);
    text-align: right;
    height: 109rpx;
  }

  .returnInformation_fd2_2_c1 {
    height: 109rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: var(--benbenFontColor0);
    text-align: right;
  }

  .returnInformation_fd2_1_c2 {
    font-size: 16rpx;
    font-weight: 400;
    color: rgba(191, 191, 191, 1);
    margin: 0rpx 0rpx 0rpx 20rpx;
  }

  .returnInformation_fd2_1_c1 {
    height: 109rpx;
    font-size: 32rpx;
    font-weight: 400;
    color: var(--benbenFontColor0);
    text-align: right;
  }

  .returnInformation_fd2_1_c0 {
    font-size: 32rpx;
    font-weight: 400;
    color: #111111;
  }

  .returnInformation_fd2_1 {
    border-bottom: 1px solid #eee;
  }

  .returnInformation_fd2_0 {
    color: rgba(102, 102, 102, 1);
    font-size: 28rpx;
    font-weight: 500;
    line-height: 41rpx;
  }
</style>